<template>
    <div class="notification" v-show="majorReprints.length > 0">
        <div class="label">
            <span class="text">
                <div v-for="text, index in getTitle(endData.topArticle)" :key="index">{{ text }}</div>
            </span>
        </div>
        <div class="infoContent">
            <div class="majorReprints ellipsis" :class="index == 0 ? 'firstInfo' : 'otherInfo'"
                v-for="item, index in majorReprints" :key="index" @click="jumpPage(item)">
                <span v-show="index == 0">{{ item.title || '' }}</span>
                <span v-show="index > 0">{{ item.title || '' }}{{ ' ' + item.publishTime }}</span>
            </div>
        </div>
    </div>
</template>
<script>
import homepageApi from '@/api/homepage';
export default {
    name: 'App',
    components: {},
    props: {
        endData: {
            type: Object,
            default: () => { return {} }
        }
    },
    data() {
        return {
            majorReprints: []
        }
    },
    mounted() {
        this.queryMajorReprints();
    },
    methods: {
        getTitle(text = '') {
            if (text.length >= 4) {
                let index = Math.ceil(text.length / 2);
                return [text.slice(0, index), text.slice(index)];
            } else {
                return [text]
            }
        },
        async queryMajorReprints() {
            let { data } = await homepageApi.queryMajorReprints();
            let list = data || [];
            let TOPPING = list.filter(item => {
                return item.majorReprints == 'TOPPING'
            })
            let SECONDCOLUMN = list.filter(item => {
                return item.majorReprints !== 'TOPPING'
            })
            this.majorReprints = TOPPING.concat(SECONDCOLUMN);
            console.log(this.majorReprints)
        },
        jumpPage(item) {
            console.log(item)
            if (item.jumpType == 'URL' && item.url) {
                window.open(item.url, '_blank');
            } else if (item.jumpType == 'ARTICLE' && item.articleId) {
                this.falg = item.articleId;
                this.jumpNavigation(item)
            }
        },
        jumpNavigation(item) {
            this.$router.push({
                path: '/navigation', query: {
                    articleId: item.articleId,
                    name: '文章'
                }
            })
        }
    }
}
</script>

<style scoped>
.ellipsis {
    width: 200px;
    /* 设置你需要的宽度 */
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏超出容器的内容 */
    text-overflow: ellipsis;
    /* 显示省略号 */
}

.notification {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}

.notification .label {
    max-width: 120px;
    min-height: 80px;
    padding: 10px 30px;
    background: linear-gradient(to right, #4ab1fe, #1650a7);
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.notification .text {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    line-height: 30px;
}

.notification .infoContent {
    width: calc(100% - 150px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    line-height: 40px;
    text-align: left;
}

.notification .infoContent .firstInfo {
    width: 100%;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
}

.notification .infoContent .otherInfo {
    width: calc(100% / 3 - 10px);
    font-size: 14px;
    margin-right: 10px;
    cursor: pointer;
}
</style>